<template>
    <div style="height: 100%">
        <baidu-map class="map" @ready="setDistanceToolInstance"
                   style="display: flex; flex-direction: column;height: 100%;overflow: hidden" center="沈阳市">
            <bm-view style="width: 100%; height:100px; flex: 1"></bm-view>

            <bm-marker v-for="(item,index) in markerList" :key="index" :position="item.position" :dragging="true"
                       :icon="item.icon"></bm-marker>
            <bm-control>
                <button @click="openDistanceTool">开启测距</button>
            </bm-control>
            <div class="map-box" @click="showModel=true" v-if="!showModel">
                <img src="../../../../assets/images/mapInfo.png" class="map-info">
            </div>
        </baidu-map>
        <Modal v-model="showModel"
               draggable
               footer-hide
               :width="80"
               scrollable
               @on-cancel="modalCancel"
               ref="wlModel"
               class="map-modal">
            <template slot="header">
                <div class="modal-header">
                    可以移动我
                </div>
            </template>
            <div class="modal-body">
                <map-table :table-height="230" height :data1="table1"></map-table>
                <div class="car-state">
                    <span>车辆总数:0</span>
                    <span class="orange">报警数:0</span>
                    <span>在线数:0</span>
                </div>
            </div>
        </Modal>
    </div>
</template>

<script>
import mapInfo from '@/assets/images/mapInfo.png'
import MapTable from './components/map-table'
import markerData from './data/marker-data'
import DistanceTool from 'bmaplib.distancetool'
import { mapActions } from 'vuex'
import { restPos } from '@/api/map'

export default {
  unmount () {
    distanceTool && distanceTool.close()
  },
  components: {
    MapTable
  },
  data () {
    return {
      position: {
        lng: 123.454845,
        lat: 41.721936
      },
      mapInfo: mapInfo,
      showModel: false,
      markerList: markerData,
      distanceTool: Object,
      table1: []
    }
  },
  computed: {
    getIds () {
      let data = this.$store.state.app.treeSelectData.checkData
      let ids = ''
      for (let i = 0; i < data.length; i++) {
        if (data[i].vehicle_no) {
          ids = ids === '' ? data[i].id : ids + ',' + data[i].id
        }
      }
      console.log(ids, '--')
      return ids
    }
  },
  methods: {
    ...mapActions([
      'setTreeOptions'
    ]),
    setDistanceToolInstance ({ map }) {
      this.distanceTool = new DistanceTool(map, { lineStroke: 2 })
    },
    openDistanceTool (e) {
      const { distanceTool } = this
      distanceTool && distanceTool.open()
    },
    modalCancel () {
      this.showModel = false
    }
  },
  mounted () {
    this.setTreeOptions({ multiple: false, showCheckbox: true })
  },
  beforeRouteLeave (to, from, next) {
    this.setTreeOptions({ multiple: false, showCheckbox: false })
    next()
  },
  watch: {
    getIds (data) {
      restPos({ ids: data }).then(ret => {
        let data = ret.data.results
        if (data.length > 0) {
          for (let i = 0; i < data.length; i++) {
            data[i].position = ''
          }
          this.table1 = data
        }
      })
    }
  }

}
</script>

<style scoped lang="less">
    @import "../../../../index.less";

    .map-box {
        bottom: 0px;
        right: 0px;
        position: absolute;
        width: 50px;
    }

    .modal-body {
        height: 300px;
    }

    .map-info {
        width: 100%;
    }

    .map-modal /deep/ .ivu-modal {
        display: flex;
    }

    .map-modal /deep/ .ivu-modal-header {
        background-color: @wl-bg-color;
    }

    .map-modal /deep/ .ivu-modal-body {
        padding: 0 5px;
    }

    .map-modal /deep/ .ivu-tabs-bar {
        margin-bottom: 5px;
    }

    .map-modal /deep/ .ivu-modal-content-drag {
        top: calc(100vh - 460px);
    }

    .car-state {
        margin-top: 5px;
        font-weight: bold;
    }

    .car-state span {
        margin-left: 20px;
    }

    .orange {
        color: #ff9900;
    }
</style>
